<template>
    <div class="container">
        <h1 class="tip">确认挂号信息</h1>
        <!-- 展示就诊人信息 -->
        <el-card class="box-card">
            <!-- 卡片头部 -->
            <template #header>
                <div class="card-header">
                    <span>请选择就诊人</span>
                    <!-- //添加就诊人 -->
                    <el-button type="primary" size="default" @click="" :icon="User">添加就诊人</el-button>
                </div>
            </template>
            <div class="user">
                <Visitor @click=changeIndex(index) class="item" v-for="(user, index) in userArr" :key="index"
                    :user="user" :index="index" :currentIndex="currentIndex">
                </Visitor>
            </div>
        </el-card>
        <!-- //展示医生信息 -->
        <el-card class="box-card">
            <el-descriptions class="margin-top" title="With border" :column="3" border>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊日期:
                        </div>
                    </template>
                    {{ DoctorArr.workDate }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊医院:
                        </div>
                    </template>
                    {{ DoctorArr.param?.hosname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊科室:
                        </div>
                    </template>
                    {{ DoctorArr.param?.depname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生姓名:
                        </div>
                    </template>
                    {{ DoctorArr.docname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生职称:
                        </div>
                    </template>
                    {{ DoctorArr.title }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生专长:
                        </div>
                    </template>
                    {{ DoctorArr.skill }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生服务费:
                        </div>
                    </template>
                    <span style="color:red">{{ DoctorArr.amount }}</span>
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <div class="btn">
            <el-button type="primary" size="default" :disabled="currentIndex == -1"
                @click="submitOrder">确认挂号</el-button>
        </div>


    </div>
</template>

<script setup lang="ts">
import {
    User
} from '@element-plus/icons-vue'
import Visitor from './Visitor.vue'
import { onMounted, ref } from 'vue';
import { reqGetUser, reqGETDoctor } from '@/api/hospital';
import { SUBMITORDER } from '@/api/user';
import type { SubmitOrder } from '@/api/user/type';
import type { UserResponseData, UserArr, DoctorInfoData } from '@/api/hospital/type';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
//获取路由对象
let $route = useRoute();
let $router = useRouter();
//存储就诊人或医生数组
let userArr = ref<UserArr>([]);
let DoctorArr = ref<any>([]);
//储存用户确认就诊人索引值
let currentIndex = ref<number>(-1);
let fetchUserData = async () => {
    //@ts-ignore
    let result: UserResponseData = await reqGetUser();
    if (result.code == 200) {
        userArr.value = result.data;
        console.log(userArr);

    }
}
//获取就诊人信息
let fetDoctorData = async () => {
    let result: DoctorInfoData = await reqGETDoctor($route.query.docId as string);
    DoctorArr.value = result.data;

}
//点击就诊人组件回调
const changeIndex = (index: number) => {
    //存储当前用户选中就诊人索引值
    currentIndex.value = index;
}
//确定挂号按钮回调
let submitOrder = async () => {
    //医院编号
    let hoscode = DoctorArr.value.hoscode;
    let scheduleId = DoctorArr.value.id;
    let patinetId = userArr.value[currentIndex.value].id;
    //就诊人ID
    //@ts-ignore
    let result: SubmitOrder = await SUBMITORDER(hoscode, scheduleId, patinetId);
    //提交成功
    if (result.code == 200) {
        $router.push({ path: '/user/order', query: { orderId: result.data } })
    }
    else {
        ElMessage({
            type: 'error',
            message: result.message
        })
    }
}
onMounted(() => {
    fetchUserData();
    fetDoctorData();
})
</script>

<style scoped>
.container {
    .tip {
        font-weight: 900;
        color: #7f7f7f;
        font-size: 20px;
    }

    .box-card {
        margin: 20px 0px;

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .user {
            display: flex;
            flex-wrap: wrap;

            .item {
                width: 32%;
                margin: 5px;
            }
        }
    }

    .btn {
        display: flex;
        justify-content: center;
        margin: 10px 0px;
    }
}
</style>